<template>
  <el-dialog
    v-model="dialogVisible"
    class="filterClass"
    width="700px"
    body-class="bodyClass"
    title="条件筛选"
  >
    <!-- 上方按钮 -->
    <div class="head">
      <span><el-button type="primary" text @click="addFilter">添加</el-button></span>
      <span> <el-button type="danger" text @click="removeAllFilters">全部删除</el-button></span>
    </div>
    <!-- 动态字段筛选列表 -->

    <div class="filter">
      <el-form v-for="(filter, index) in filters" :key="index" class="form" :model="filter">
        <el-row :gutter="24">
          <el-col :span="7">
            <el-select
              v-model="filter.field"
              placeholder="请选择字段"
              @change="onFieldChange(index)"
            >
              <el-option
                v-for="field in fields"
                :key="field.value"
                :label="field.label"
                :value="field.value"
              />
            </el-select>
          </el-col>

          <el-col :span="7">
            <el-select v-model="filter.condition" placeholder="请选择条件">
              <el-option
                v-for="item in conditionOptions[index]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>

          <el-col :span="7">
            <el-input v-model="filter.value" placeholder="请输入值" />
          </el-col>

          <el-col :span="3" class="remove-btn">
            <span>并且</span>
            <el-icon class="remove-icon" @click="removeFilter(index)"><RemoveFilled /></el-icon>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div v-if="filters.length === 0" class="no-filter">
      <img src="~@/assets/images/nofilter.svg" alt="" />
      <span>暂无筛选条件</span>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="applyFilter">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { RemoveFilled } from '@element-plus/icons-vue';
import { ref, watch } from 'vue';

// 外部传入的字段数组，包含字段的类型（这里举例是税率、日期、产品名称）
const props = defineProps({
  fields: {
    type: Array,
    required: true
  }
});

const dialogVisible = ref(false);
const filters = ref([{ field: '', condition: '', value: '' }]);

const conditionOptions = ref([[]]);
const fields = ref(props.fields); // 创建一个响应式 ref

// 监听 props.fields 的变化
watch(
  () => props.fields,
  (newFields) => {
    fields.value = newFields;
  },
  { immediate: true }
);

// 添加筛选条件
const addFilter = () => {
  filters.value.push({
    field: '',
    condition: '',
    value: ''
  });
  conditionOptions.value.push([]);
};

// 删除指定行
const removeFilter = (index) => {
  filters.value.splice(index, 1);
  conditionOptions.value.splice(index, 1);
};

// 删除所有筛选条件
const removeAllFilters = () => {
  filters.value = [];
  conditionOptions.value = [];
};

// 根据选择的字段动态更新条件
const onFieldChange = (index) => {
  const field = filters.value[index].field;
  updateConditionOptions(field, index);
};

// 动态更新条件选项
const updateConditionOptions = (field, index) => {
  // 查找字段对象以获取类型
  const fieldObj = fields.value.find((f) => f.value === field);
  if (!fieldObj) return;

  switch (fieldObj.type) {
    case 'date':
      conditionOptions.value[index] = [
        { label: '今天', value: 'today' },
        { label: '昨天', value: 'yesterday' },
        { label: '本周', value: 'thisWeek' },
        { label: '上周', value: 'lastWeek' },
        { label: '本月', value: 'thisMonth' },
        { label: '上月', value: 'lastMonth' },
        { label: '本年', value: 'thisYear' },
        { label: '去年', value: 'lastYear' },
        { label: '等于', value: 'equal' },
        { label: '不等于', value: 'notEqual' },
        { label: '早于', value: 'earlier' },
        { label: '晚于', value: 'later' },
        { label: '早于或等于', value: 'earlierOrEqual' },
        { label: '晚于或等于', value: 'laterOrEqual' },
        { label: '介于', value: 'between' },
        { label: '为空', value: 'isNull' },
        { label: '不为空', value: 'isNotNull' }
      ];
      break;
    case 'number':
      conditionOptions.value[index] = [
        { label: '等于', value: 'equal' },
        { label: '不等于', value: 'notEqual' },
        { label: '大于', value: 'greater' },
        { label: '小于', value: 'less' },
        { label: '大于或等于', value: 'greaterOrEqual' },
        { label: '小于或等于', value: 'lessOrEqual' },
        { label: '介于', value: 'between' },
        { label: '为空', value: 'isNull' },
        { label: '不为空', value: 'isNotNull' }
      ];
      break;
    case 'text':
      conditionOptions.value[index] = [
        { label: '包含', value: 'contains' },
        { label: '不包含', value: 'notContains' },
        { label: '等于', value: 'equal' },
        { label: '不等于', value: 'notEqual' },
        { label: '等于(不区分大小写)', value: 'equalIgnoreCase' },
        { label: '不等于(不区分大小写)', value: 'notEqualIgnoreCase' },
        { label: '以...开头', value: 'startsWith' },
        { label: '以...结尾', value: 'endsWith' },
        { label: '为空', value: 'isNull' },
        { label: '不为空', value: 'isNotNull' }
      ];
      break;
    default:
      // 默认为文本类型
      conditionOptions.value[index] = [
        { label: '等于', value: 'equal' },
        { label: '不等于', value: 'notEqual' },
        { label: '包含', value: 'contains' }
      ];
  }
};

// 初始化条件
watch(
  filters,
  () => {
    filters.value.forEach((filter, index) => {
      if (filter.field) {
        updateConditionOptions(filter.field, index);
      }
    });
  },
  { immediate: true }
);

// 应用筛选条件
const applyFilter = () => {
  hide();
};

const show = () => {
  dialogVisible.value = true;
};

const hide = () => {
  dialogVisible.value = false;
};

defineExpose({
  show,
  hide
});
</script>

<style lang="scss">
.filterClass {
  .head {
    margin-bottom: 10px;
  }

  .bodyClass {
    min-height: 300px;
    box-sizing: border-box;
  }

  .filter {
    padding: 0 8px;

    .form {
      margin-bottom: 10px;
    }

    .remove-btn {
      cursor: pointer;
      display: flex;
      align-items: center;

      .remove-icon {
        color: #409eff;
        font-size: 22px;
        margin-left: 8px;
      }
    }
  }

  .no-filter {
    text-align: center;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 60px;
      height: 60px;
    }

    span {
      display: block;
      margin-top: 12px;
      color: #999;
    }
  }

  .dialog-footer {
    text-align: right;
  }
}
</style>
